<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store,no-cache">
<title></title>
<link rel="stylesheet" href="../imgv2/css/default.min.css" />
<link rel="stylesheet" href="../jsv2/bootstrap/css/bootstrap-ico.css" />
<style>
.address-detail {
	height: 48px;
	background-color: rgba(150, 204, 112, 1);
	display: inline-block;
	white-space: nowrap;
	width: 100%;
}

.address-detail>table {
	width: 100%;
	height: inherit;
	display: inherit;
}

.address-detail tr {
	height: 24px;
	line-height: 24px;
}

.address-detail td {
	height: inherit;
	line-height: inherit;
}

.td1 {
	width: 20%;
}

.td2 {
	width: 60%;
}

.td3 {
	width: 20%;
	text-align: center;
}

.photo-img {
	height: 40px;
	width: 40px;
	margin: 0px;
	border-radius: 3px;
	margin-left: 3px;
	margin-right: 3px;
}

.photo-img.img-selected+.photo-img-marker {
	display: inline-block;
}

.photo-img.user-leader {
	box-shadow: 0px 0px 3px rgba(255, 255, 0, 1), -0px -0px 3px
		rgba(255, 255, 0, 1);
}

.friends-list .photo-img-marker {
	width: 40px;
	height: 40px;
	background-image: url("../img/delete.png");
	background-position: left top;
	background-repeat: no-repeat;
	margin-left: -45px;
	display: none;
}

.address-detail .photo-img {
	margin-top: 5px;
}

.address-detail-title, .address-detail-info {
	color: rgba(255, 255, 255, 1);
}

.base-info, .address-info {
	background-color: rgba(255, 255, 255, 1);
}

.base-info .input-text, .address-info .input-text {
	border-bottom: 1px solid rgba(229, 229, 229, 1);
	height: 30px;
	line-height: 30px;
	white-space: nowrap;
}

.base-info input, .address-info input {
	height: 28px;
	line-height: 28px;
	border: 0px;
	margin-left: 0.5em;
	width: 90%;
}

.base-info .input-text:last-child {
	border-bottom: 0px solid rgba(229, 229, 229, 1);
}

.base-info .glyphicon-menu-right, .address-info .glyphicon-menu-right {
	color: rgba(203, 203, 203, 1);
}

.address-info input {
	width: 85%;
}

.address-info .glyphicon-map-marker {
	color: rgba(242, 179, 133, 1);
	font-size: 16px;
}

.friends-list ul {
	width: 100%;
	text-align: justify;
}

.friends-list li {
	display: inline-block;
	width: 16%;
}

.friends-list li span {
	font-size: 12px;
	line-height: 16px;
	display: inline-block;
	width: 100%;
	text-align: center;
	margin: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0px;
}

.title {
	height: 24px;
	background-color: rgba(233, 233, 233, 1);
	/*margin-top: -5px;*/
}

.btns-list {
	margin-top: 8px;
	text-align: center;
	margin-bottom: 8px;
}

.title.friends {
	height: 28px;
}

.title.friends>span, .title.friends>div {
	display: inline-block;
	width: 50%;
	float: left;
}

.title.friends>span {
	height: inherit;
	line-height: 28px;
}

.friends-list {
	margin-top: 2px;
	margin-bottom: 2px;
	height: 140px;
	overflow-y: auto;
}

.btn-normal {
	padding: 0px;
	padding-left: 6px;
	padding-right: 6px;
}

.btns {
	line-height: 28px;
}

.invitation-friends {
	height: 36px;
}

.invitation-friends>div {
	float: left;
	width: 50%;
	height: 100%;
	line-height: 36px;
}

.invitation-title {
	text-align: left;
}

.btns-ico {
	text-align: right;
}

.btns-ico i {
	width: 36px;
	height: 32px;
	line-height: 32px;
	background-position: center center;
	background-repeat: no-repeat;
	display: inline-block;
	cursor: pointer;
}

.ico-friends {
	background-image: url(../imgv2/pengyouquan.png);
}

.ico-weixin {
	background-image: url(../imgv2/wechat.png);
}

.friends-count {
	margin-left: 3px;
	margin-right: 3px;
}

.photo-img.off-line {
	opacity: .6;
}
</style>
</head>

<body>
	<div class="address-detail">
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td rowspan="2" class="td1"><img class="photo-img" src="" /></td>
				<td class="td2"><span class="address-detail-title"><em
						id="owner-name">永远的永远</em>&nbsp;&nbsp;创建了</span></td>
				<td rowspan="2" class="td3">
					<button class="btn btn-primary btn-normal">旅程进行中</button>
				</td>
			</tr>
			<tr>
				<td><span class="address-detail-info"> <!--<i class="glyphicon glyphicon-map-marker"></i>-->
						<em id="trip-title">黄河路11号</em>
				</span></td>
			</tr>
		</table>
	</div>
	<div class="title" style="margin-top: -5px;">旅程时间</div>
	<div class="base-info">
		<div class="input-text">
			<input type="text" data-column="starttime" id="txtJourneyStartTime"
				readonly="readonly" />
		</div>
		<div class="input-text">
			<input type="text" data-column="endtime" id="txtJourneyEndTime"
				readonly="readonly" />
		</div>
	</div>
	<div class="title">目的地</div>
	<div class="address-info">
		<div class="input-text">
			<i class="glyphicon glyphicon-map-marker"></i> <input type="text"
				data-column="destination" id="txtJourneyDestination"
				readonly="readonly" />
			<!-- <i class="glyphicon glyphicon-menu-right"></i>-->
		</div>
	</div>
	<div class="btns-list">
		<button id="btnChangeJourney" class="btn btn-success">修改旅程</button>
		<button id="btnEndJourney" class="btn btn-success">结束旅程</button>
	</div>
	<div class="invitation-friends">
		<div class="invitation-title">邀请好友参加</div>
		<div class="btns-ico">
			<i class="ico-friends"></i><i class="ico-weixin"
				id="onMenuShareAppMessage"></i>
		</div>
	</div>
	<div class="title friends" style="clear: both;">
		<span>已参加好友<em class="friends-count">0</em>人
		</span>
		<div class="btns">
			<button id="btnChangeLeader" class="btn btn-success btn-normal">更换领队</button>
			<button id="btnExit" class="btn btn-success btn-normal">请出</button>
		</div>
	</div>
	<div class="friends-info">
		<div class="friends-list" data-column="friendslist">
			<ul></ul>
		</div>
	</div>
	<div class="lift-info">
		<button id="btnStartJourney" class="btn btn-success btn-block">开始旅程</button>
	</div>
	<div class="iframe-containter"></div>
</body>
<script src="../jsv2/jQuery/jquery-1.11.2.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="../jsv2/QueryStringParser.js"></script>
<script src="../jsv2/lib/json3.min.js"></script>
<script src="../jsv2/jsonMsg.js"></script>
<script src="../jsv2/journey/operateData.js"></script>
<script src="../jsv2/AMapCommon.js"></script>
<script>
		var selectUserCount = 0,tripData,
			openId, tripId, isActive;
		$(function() {
			openId = queryString.getParam("openid");
			tripId = queryString.getParam("tripid");
			isActive = queryString.getParam("isActive");
			if (tripId.indexOf("#") > -1) {
				tripId = tripId.replace("#", "");
			}
			/*if (openId == null || openId == "" || tripId == null || tripId == "") {
				alert("参数错误...");
				window.location.href = "add.html?openid=" + openId;
				return false;
			} else {*/
			//retrieveFriends()
			retrieveTrip(tripId);
			//}
			$(document).on('click', '.photo-img', function(e) {
				var tar = $(e.target);
				tar.hasClass('img-selected') ? tar.removeClass('img-selected') : tar.addClass('img-selected');
				selectUserCount++;
				setBtnExitCanClick();
			});
			$('.photo-img-marker').on('click', function(e) {
				var tar = $(e.target);
				$('.photo-img', tar.parent()).removeClass('img-selected');
				selectUserCount--;
				setBtnExitCanClick();
			});
			setBtnExitCanClick();
			//修改旅程
			$('#btnChangeJourney').on('click', function() {
				setIframeSrc('add.html?isedit=1&isActive=' + isActive + '&openid=' + openId + '&tripid=' + tripId);
			});
			$('#btnChangeLeader').on('click', function() {
				setIframeSrc('changeLeader.html?openid='+openId+'&tripid=' + tripId);
			});
			$('#btnEndJourney').on('click', function() {
				updateTripStatus(tripId, 'Terminate');
			});
			$('#btnStartJourney').on('click', function() {
				updateTripStatus(tripId, 'Active');
			});
		});
		/**
		 * 设置清楚按钮是否可操作
		 */
		function setBtnExitCanClick() {
			if (selectUserCount > 0) {
				$('#btnExit').removeAttr('disabled').on('click', function() {});
			} else {
				$('#btnExit').off('click').attr({
					'disabled': 'disabled'
				});
			}
		}

		function retrieveTrip(tripId) {
			var dataStr = {
				"TripID": tripId
			};
			bidgeToWeixin(openId, 'TripDetail', dataStr, function(data, status, xhr) {
				var tripOwnerName = "",
					tripMember = "",
					data = data.portalResp.Data;
				tripData=data;
				$("#txtJourneyDestination").val(data.Destination.Name);
				$('.friends-count').html(data.MemberStatus.length);
				//$(".title.friends").html("<i class=\"iconfont tool_ico\">&#xe609;</i>参与人数：" + data.MemberStatus.length + "人");
				$("#txtJourneyStartTime").val(data.StartDate);
				$("#txtJourneyEndTime").val(data.ValidDate);
				var lis=[];
				$.each(data.MemberStatus, function(index) {
							lis.push($('<li>').data('user', data.MemberStatus[index]).attr({'OpenID':data.MemberStatus[index].OpenID}).append($('<img>').attr({
									'src':data.MemberStatus[index].ImageURL
								}).addClass('photo-img ' + (data.TripLeader == data.MemberStatus[index].OpenID ? ' user-leader ' : '')+ (data.MemberStatus[index].TripMemberStatus == "-1" ? ' off-line ' : '')))
								.append($('<span>').addClass('photo-img-marker'))
								.append($('<span>').html(data.MemberStatus[index].Nickname)));
					if (openId == data.MemberStatus[index].OpenID) {
						$('#owner-name').html(data.MemberStatus[index].Nickname);
						$('.td1 img').attr({'src':data.MemberStatus[index].ImageURL});
					}
				});
				$(".friends-list ul").append(lis);
				//$(".address-detail-title").html(tripOwnerName + "创建了");
				$('#trip-title').html(data.Title);
				fillWXContent(data.Title);
			});
		}

		function fillWXContent(tripTitle) {
			var pageURL = location.href.split('#')[0];
			var dataStr = {
				PageURL: pageURL
			};
			bidgeToWeixin(openId, 'JSSignature', dataStr, function(data, status, xhr) {
				var timestamp = data.portalResp.Data.timestamp;
				var noncestr = data.portalResp.Data.noncestr;
				var signature = data.portalResp.Data.signature;
				var appId = data.portalResp.Data.appId;
				wx.config({
					debug: false,
					appId: appId,
					timestamp: timestamp,
					nonceStr: noncestr,
					signature: signature,
					jsApiList: [
						'hideOptionMenu',
						'showOptionMenu',
						'onMenuShareAppMessage'
					]
				});
				wx.ready(function() {
					wx.hideOptionMenu();
					// 2. 分享接口
					// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
					document.querySelector('#onMenuShareAppMessage').onclick = function() {
						document.getElementById("pop").style.display = "";
						wx.showOptionMenu();
						wx.onMenuShareAppMessage({
							title: '旅程邀请',
							desc: '您的好友' + ownerName + '邀请您加入' + tripTitle + '之旅。',
							link: "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + encodeURIComponent(pageURL.substring(0, pageURL.lastIndexOf("/")) + "/oauthServlet?type=2&openid=" + openId + "&tripid=" + tripId) + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect",
							imgUrl: imageURL,
							trigger: function(res) {
								//alert('用户点击发送给朋友');
							},
							success: function(res) {
								document.getElementById("pop").style.display = "none";
								alert('已邀请');
							},
							cancel: function(res) {
								alert('已取消');
							},
							fail: function(res) {
								alert(JSON.stringify(res));
							}
						});
					};
					var shareData = {
						title: '微信JS-SDK Demo',
						desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
						link: 'http://demo.open.weixin.qq.com/jssdk/',
						imgUrl: 'http://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
					};
					wx.onMenuShareAppMessage(shareData);
				});
				wx.error(function(res) {
					alert(res.errMsg);
				});
			});
		}
		function changeTripLeader(oid){
			tripData.TripLeader=oid;
			bidgeToWeixin(openId, 'EditTrip', tripData, function(data, status, xhr) {
			});
			//更新领队
			$('.friends-list li').each(function(){
				var tar=$(this),opid=tar.attr('OpenID');
				$('img',tar).removeClass('user-leader');
				if(opid==oid){
					$('img',tar).addClass('user-leader');
					}
				});
			}
	</script>

</html>